<template>
  <el-dialog :model-value="modelValue" @close="close()" draggable :close-on-click-modal="false" title="选择人员"
    width="50%">
    <el-card>
      <el-row>
        <el-table :data="userRolelist" :border="true" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
          <el-table-column prop="userName" label="姓名" />
          <el-table-column prop="nickName" label="昵称" />
          <el-table-column prop="isCurrentRole" label="选择">
            <template #default="scope">
              <el-switch v-model="scope.row.isCurrentRole" @change="changeIsCurrentRole(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div class="table-buttom-options">
          <Pagination :total="search.total" v-model:pageIndex="search.pageIndex" v-model:pageSize="search.pageSize"
            @change="query()"></Pagination>
        </div>
      </el-row>
    </el-card>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="saveForm()" v-button="['api:sys:sysuserrole:create']">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import Pagination from "@/components/pagination/pagination.vue";
import UserRoleApi, {
  QueryUserByRole,
  UserRoleByRole,
  UserRoleCreateByRole,
} from "@/api/sys/user/userRole";

const props = defineProps({
  modelValue: Boolean,
  toRoleId: String,
});

onMounted(async () => {
  await query();
});

const search = reactive<QueryUserByRole>({
  searchString: "",
  roleId: props.toRoleId,
  total: 0,
  pageIndex: 1, //第几页
  pageSize: 10, //每页多少条
});

const userRolelist = ref<UserRoleByRole[]>([]);
const selectUserIdList = ref([]);

const query = async () => {
  const { dataList, totalCount, dataExt } = await UserRoleApi.queryByRole(search);
  userRolelist.value = dataList;
  search.total = totalCount;

  if (selectUserIdList.value.length <= 0) {
    selectUserIdList.value = dataExt;
  } else {
    userRolelist.value.forEach((user) => {
      user.isCurrentRole = selectUserIdList.value.includes(user.id);
    });
  }
};

const changeIsCurrentRole = async (userRole: UserRoleByRole) => {
  if (userRole.isCurrentRole && !selectUserIdList.value.includes(userRole.id)) {
    selectUserIdList.value.push(userRole.id);
  } else if (selectUserIdList.value.includes(userRole.id)) {
    selectUserIdList.value.splice(
      selectUserIdList.value.findIndex((item) => item === userRole.id),
      1
    );
  }
};

const saveForm = async () => {
  const userRoleCreate = reactive<UserRoleCreateByRole>({
    roleId: props.toRoleId,
    userIdList: selectUserIdList.value,
  });
  const { success, message } = await UserRoleApi.createByRole(userRoleCreate);
  if (success) {
    emits("success");
    ElNotification({
      title: message,
      type: "success",
    });
    close();
  } else {
    ElNotification({
      title: message,
      type: "error",
    });
  }
};

const emits = defineEmits(["update:modelValue", "success"]);
const close = () => {
  emits("update:modelValue");
};
</script>
